//@ts-nocheck
import React, { useEffect, useRef, useState } from 'react'
import './index.less'
import HeatMap from './HeatMap'
import Close from './images/close.png'
import Tip from './images/tip.png'

interface IProps {
  /**
   * 热力图图片渲染宽度
   */
  heatImgRenderWidth: number
  /**
   * 热力图图片渲染高度
   */
  heatImgRenderHeight: number
  /**
   * 图片数据
   */
  image: { src: string; width: number; height: number }
  /**
   * 热力数据，受控
   */
  data?: Array<{ id: number; xOffset: number; yOffset: number; height: number; width: number }>
  /**
   * id 避免串数据
   */
  id: string
  /**
   * 标题
   */
  title?: string
  /**
   * 标题背景颜色
   */
  titleBgColor?: string
  /**
   * 提示文字
   */
  tips?: string
  /**
   * 选区改变时的回调
   * 无选区时为 null
   * 有选区时返回 {x: number, y: number, width: number, height: number}
   */
  onChange?: (data: { x: number; y: number; width: number; height: number }) => void
}

interface PositionSize {
  x: number
  y: number
}

const box = {
  width: 56,
  height: 56
}

const HeatMapSelectArea: React.FC<IProps> = ({
  heatImgRenderWidth,
  heatImgRenderHeight,
  image,
  id,
  title,
  tips,
  onChange,
  data = []
}) => {
  const [mapWidth, setMapWidth] = useState<number>(null)
  const [mapHeight, setMapHeight] = useState<number>(null)
  const [lockArea, setLockArea] = useState<PositionSize>(null)

  const [activeArea, setActiveArea] = useState<PositionSize>()

  const heatMapSelectAreaRef = useRef(null)

  useEffect(() => {
    let imgWidth = heatImgRenderWidth
    let imgHeight = (image.height * imgWidth) / image.width
    if (imgHeight > heatImgRenderHeight) {
      // 比容器高度高
      imgHeight = heatImgRenderHeight
      imgWidth = (image.width * imgHeight) / image.height
    }
    setMapWidth(imgWidth)
    setMapHeight(imgHeight)
  }, [])

  const mapMouseMove = (e) => {
    let selectAreaSize = heatMapSelectAreaRef.current.getBoundingClientRect()
    if (lockArea) return
    let _scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
    let _scrollLeft =
      document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset
    const activeAreaX = e.pageX - selectAreaSize.left - _scrollLeft
    const activeAreaY = e.pageY - selectAreaSize.top - _scrollTop

    const boxPosition = {
      left: activeAreaX,
      top: activeAreaY,
      right: activeAreaX + box.width,
      bottom: activeAreaY + box.height
    }

    if (boxPosition.left < 12) {
      boxPosition.left = 12
    }
    if (boxPosition.bottom > mapHeight) {
      boxPosition.top = mapHeight - box.height + 11
    }
    if (boxPosition.right > mapWidth) {
      boxPosition.left = mapWidth - box.width + 12
    }
    if (boxPosition.top < 11) {
      boxPosition.top = 11
    }
    setActiveArea({
      x: boxPosition.left,
      y: boxPosition.top
    })
  }

  const mapMouseLeave = () => {
    if (lockArea) return
    setActiveArea(null)
  }

  const reset = (event) => {
    event.stopPropagation();
    setLockArea(null)
    setActiveArea(null)
    onChange(null)
  }

  return (
    <div className="heat-map-select-area" style={{ width: heatImgRenderWidth }}>
      <div className="refresh-btn">
        <p className="title">
          {title}
        </p>
        <p className="tips">
          <img src={Tip} alt="" />
          <span>{tips}</span>
        </p>
      </div>
      <div className="map-img" style={{ height: heatImgRenderHeight }}>
        <div className="map-img-render" >
          <div ref={heatMapSelectAreaRef} onMouseMove={mapMouseMove} onMouseLeave={mapMouseLeave} className="heat-map-area-map">
            {mapWidth ? (
              <HeatMap
                width={mapWidth}
                image={image}
                data={data}
                id={`heat-map-${id}`}
                // chartRef={firstChartRef}
              />
            ) : null}
            {activeArea ? (
              <div
                className="select-area"
                style={{
                  left: activeArea.x,
                  top: activeArea.y,
                  border: lockArea ? '#ffffff 1px solid' : 'transparent 1px solid',
                  width: box.width,
                  height: box.height
                }}
                onClick={() => {
                  setLockArea({
                    ...activeArea
                  })
                  // 比例
                  let rate = image.width / mapWidth
                  onChange({
                    x: (activeArea.x - 13) * rate,
                    y: (activeArea.y - 13) * rate,
                    width: 26 * rate,
                    height: 26 * rate
                  })
                }}
              >
                <div className="close">
                  <img src={Close} alt="" onClick={reset} />
                </div>
              </div>
            ) : null}
          </div>
        </div>
      </div>
      <div className="legend">
        <span className="text">低</span>
        <div className="content">
          <div className="left-circle" />
          <div className="right-circle" />
        </div>
        <span className="text">高</span>
      </div>
    </div>
  )
}
export default HeatMapSelectArea
